<template>
  <el-dialog :visible.sync="visible" v-if="visible" width="50%" title="师资新增" top="20px" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="formData" :inline="false" :rules="rules" label-width="0" class="demo-ruleForm">
      <p class="form_required">姓名</p>
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="请输入老师姓名" size="medium" clearable />
      </el-form-item>
      <p class="form_required">头像</p>
      <el-form-item prop="bgImgUrl">
        <el-upload v-loading="bgImgUrl_loading" class="avatar-uploader el-upload"
          action="https://jsonplaceholder.typicode.com/posts/" :http-request="(params) => uploadRequest(params, 'bgImgUrl')"
          :show-file-list="false">
          <img v-if="formData.bgImgUrl" :src="formData.bgImgUrl" class="avatar">
          <div v-else class="upload-text">选择图片</div>
        </el-upload>
        <el-input v-show="false" v-model="formData.bgImgUrl"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="confirm(true)" :loading="submitLoading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { uploadFile } from '@/api/admin.js'
export default {
  data() {
    return {
      submitLoading: false,
      loading: false,
      formData: {},
      bgImgUrl_loading: false,
      emblem_loading: false,
      teacherPhotos: [],
      selectedOptions: [],
      visible: false,
      action:'',
      rules: {
        bgImgUrl: [{
          required: true,
          message: '请上传老师头像'
        }],
        name: [{
          required: true,
          message: '老师姓名不能为空'
        }]
      }
    }
  },
  methods: {
    add() {
      this.visible = true
      this.formData = {}
      this.action = 'add'
    },
    edit(record) {
      this.action = 'edit'
      this.visible = true
      this.formData = record
    },
    uploadRequest(params, key) {
      this[`${key}_loading`] = true
      uploadFile(params).then(res => {
        this[`${key}_loading`] = false
        if (res && res.data && res.data.length) {
          if (key === 'teacher') {
            this.teacherPhotos.push(res.data[0])
          } else {
            this.$set(this.formData, key, res.data[0])
          }
        }
      })
    },
    /**
     * 保存
     */
    confirm(closeDialog) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$emit('ok',{data:this.formData,action:this.action})
          this.visible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>
  
<style scoped>
.avatar-uploader,
.el-upload {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px !important;
  height: 178px;
}

.avatar-uploader:hover,
.el-upload:hover {
  border-color: #409EFF;
}

.upload-text {
  font-size: 14px;
  color: #8c939d;
  line-height: 178px;
  text-align: center;
  margin: 0 auto;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.container {
  padding-bottom: 30px;
}

.t_img {
  display: inline-block;
  width: 178px;
  height: 178px;
  margin-right: 12px;
  margin-top: 12px;
}

.form_required::before {
  content: '*';
  color: red;
}
</style>
<style>
.demo-ruleForm .el-input,
.demo-ruleForm .el-select {
  width: 300px;
}

.el-dialog__header {
  border-bottom: 1px solid #e8e8e8;
}

.el-dialog__footer {
  padding: 20px !important;
  border-top: 1px solid #e8e8e8;
}
</style>
  